<template>
	<view>
		<view class="card" v-if="detail.source!=sources['系统派单'] && detail.status==statuses['已评价']">
			<view class="horizontal" style="justify-content: flex-start;line-height: 60rpx;align-items: center;">
				<text class="gst">用户评分</text>
				<uni-rate :value="detail.workOrderResultDetailVo.star" readonly disabled></uni-rate>
			</view>
		</view>

		<view class="mask" v-if="assigning">
			<view class="prompt">
				<view style="font-weight: bold;margin-bottom: 30rpx;">将此工单分派给维保人员</view>
				<radio-group name="mt" @change="changeMt">
					<label v-for="(mt, idx) in maintainers" :key="idx" class="capsule fixed" style="display: flex; flex-direction: row;">
							<radio color="#007AFF" :value="mt.id"/>
							<view class="scale" style="display: flex;flex-direction: row;justify-content: space-between;">
								<view>{{mt.name}}</view>
								<view>当前{{mt.allocateNum}}单</view>
							</view>
					</label>
				</radio-group>
				<view class="horizontal" style="margin-top: 80rpx;">
					<button style="background-color: var(--color-cancel);color: white;margin-right: 50rpx;" class="capsule scale" @tap="assigning=false" size="mini">取消</button>
					<button v-if="mt" style="background-color: var(--color-ok);color: white;margin-left: 50rpx;" class="capsule scale" @tap="assign" size="mini">确定</button>
					<button v-else disabled style="background-color: gray;color: white;margin-left: 50rpx;" class="capsule scale" size="mini">确定</button>
				</view>
				<view class="close" @tap="assigning=false">×</view>
			</view>
		</view>
		
		<view class="mask" v-if="shenpiing">
			<view class="prompt">
				<title>审批工单</title>
				<radio-group name="mt" @change="changeShenpi">
					<label class="capsule">
						<radio :value="2" color="#007AFF" /><text>通过</text>
					</label>
					<label class="capsule">
						<radio color="#007AFF" :value="3" /><text>不通过</text>
					</label>
				</radio-group>
				<block v-if="shenpi.status==3">
					<input style="border: solid 1px gray;" type="text" v-model="shenpi.reason" placeholder="请输入拒绝的原因" />
				</block>
				<view class="horizontal" style="margin-top: 80rpx;">
					<button style="background-color: var(--color-cancel);color: white;margin-right: 50rpx;" class="capsule scale" @tap="shenpiing=false;shenpi.status=''" size="mini">取消</button>
					<button v-if="shenpi.status" style="background-color: var(--color-ok);color: white;margin-left: 50rpx;" class="capsule scale" @tap="commitShenpi" size="mini">确定</button>
					<button v-else disabled style="background-color: gray;color: white;margin-left: 50rpx;" class="capsule scale" size="mini">确定</button>
				</view>
				<view class="close" @tap="shenpiing=false">×</view>
			</view>
		</view>
		
		<view class="card">
			<view :class="detail.status<=2?'will':(detail.status<=4?'ing':'ed')" style="font-weight: bold;font-size: large;">{{statuses[detail.status]}}</view>
			<view class="splitter" style="margin: 20rpx 0;"></view>
			<view class="gst">工单编号：{{detail.no}}</view>
			<view class="gst">工单类型：{{types[detail.type] || ''}}</view>
		</view>
		
		<view class="card" v-if="detail.workUserOrderDetailVo" style="line-height: 1.5em;">
			<view class="gst">联系人：{{detail.workUserOrderDetailVo.createName || detail.workUserOrderDetailVo.comapanyName || detail.workUserOrderDetailVo.name || ''}}</view>
			<view class="gst">联系电话：{{detail.workUserOrderDetailVo.createPhone || detail.workUserOrderDetailVo.phone || ''}}</view>
			<view class="gst">客户地址：{{detail.address || ''}}</view>
		</view>
		
		<view class="card" style="line-break: 1.5em;" v-if="[types['开通'], types['报修']].includes(detail.type)">
			<view class="gst">上门时间：
				<block v-if="detail.workUserOrderDetailVo.visitDate">
					{{detail.workUserOrderDetailVo.visitDate | smartTime("YY/mm/dd")}}&nbsp;{{detail.workUserOrderDetailVo.visitStartTime || ''}}-{{detail.workUserOrderDetailVo.visitEndTime || ''}}
				</block>
				<block v-else>----</block>
			</view>
		</view>
		
		<view class="card" style="line-height: 1.5em;">
			<view class="gst">工单来源：{{sources[detail.source] || ''}}</view>
			<view class="gst" v-if="detail.applyTime">申请时间：{{detail.applyTime}}</view>
			<view class="gst" v-if="detail.allocateTime">派单时间：{{detail.allocateTime}}</view>
			<view class="gst" v-if="detail.acceptTime">接单时间：{{detail.acceptTime}}</view>
			<view class="gst" v-if="detail.finishTime">完成时间：{{detail.finishTime}}</view>
		</view>
		
		<view v-if="detail.remark" class="card" style="line-height: 1.5em;">
			<view class="gst">报停原因：{{detail.remark}}</view>
		</view>
		
		<view v-if="detail.workStationOrderDetailVo" class="card" style="line-height: 1.5em;">
			<view class="gst">水站名称：{{detail.workStationOrderDetailVo.name}}</view>
			<view class="gst">水站地址：{{detail.address}}</view>
			<view class="gst" v-if="detail.type==types['更换滤芯']">滤芯型号：{{detail.workStationOrderDetailVo.chipType}}</view>
		</view>

		<view v-if="detail.workOrderHitchDetailVo" class="card" style="line-height: 1.5em;">
			<view class="gst" v-if="detail.workOrderHitchDetailVo.type">故障类型：{{detail.workOrderHitchDetailVo.type}}</view>
			<view class="gst" v-if="detail.workOrderHitchDetailVo.remark">故障内容：{{detail.workOrderHitchDetailVo.remark}}</view>
			<block v-if="detail.workOrderHitchDetailVo.picList.length>0">
				<view class="gst">故障图片：</view>
				<view class="gallery" >
					<image :key="idx" @tap="preview($event, idx, detail.workOrderHitchDetailVo.picList)" webp show-menu-by-longpress lazy-load
					v-for="(img, idx) in detail.workOrderHitchDetailVo.picList" :src="img" mode="aspectFill" />
				</view>
			</block>
		</view>
		
		<view v-if="detail.staff" class="card" style="line-height: 1.5em;max-height: 5em;overflow: scroll;">
			<view class="gst">维保人员：{{detail.staff.name}}</view>
			<view class="gst">联系电话：{{detail.staff.phone}}</view>
		</view>
		
		<view class="card" style="line-height: 1.5em;" 
		v-if="detail.type==types['机房巡检'] && [statuses.待审核, statuses.审核通过].includes(detail.status)">
			<navigator class="horizontal gst" :url="`../forms/forms?form=1&id=${detail.id}&title=清洁与设备记录表`">
				<view>表一：清洁与设备记录表</view>
				<view>点击查看</view>
			</navigator>
			<navigator class="horizontal gst" :url="`../forms/forms?form=2&id=${detail.id}&title=维护人员日常巡检总表`">
				<view>表二：维护人员日常巡检总表</view>
				<view>点击查看</view>
			</navigator>
		</view>
		
		<view v-if="detail.workOrderResultDetailVo" class="card" style="line-height: 1.5em;">
			<view class="gst">服务内容：{{detail.workOrderResultDetailVo.remark}}</view>
			<view class="gst">现场照片：</view>
			<view class="gallery" v-if="detail.workOrderResultDetailVo.picList.length>0">
				<image :key="idx" @tap="preview($event, idx, detail.workOrderResultDetailVo.picList)" webp show-menu-by-longpress lazy-load
				v-for="(img, idx) in detail.workOrderResultDetailVo.picList" :src="img" mode="aspectFill" />
			</view>
		</view>
		
		<view style="margin-bottom: 100rpx;"></view>
		
		<view class="bottom horizontal">
			<button style="background-color: var(--color-ok);color: white" class="capsule scale" @tap="showMaintainers" 
			v-if="detail.status==statuses['待派单']">派单</button>
			<button class="submit" @tap="showMaintainers(true)" 
			v-else-if="detail.source==sources['系统派单'] && detail.type==types['机房巡检'] && detail.status==statuses['待接单']">改派</button>
			<!-- <button class="submit" v-else-if="detail.status==3">催单</button> -->
			<button style="background-color: var(--color-ok);color:white" class="capsule scale" @tap="startShenpi" 
			v-else-if="detail.status==statuses['待审核'] && detail.source!=sources['市民小程序']">审批工单</button>
		</view>
	</view>
</template>

<script>
	import {statuses, sources, types, users} from '../../static/constants.js'
	
	const app = getApp()
	export default {
		components: {
			
		},
		onShow() {
			
		},
		onLoad(opt) {
			console.log(statuses)
			uni.showLoading({
				title:'加载中...',
			})
			if (opt.id) {
				// 获取对应id下的工单详情
				uni.request({
					header: {
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.adurl + 'workOrder/detail/' + opt.id,
					
					method: 'GET',
					data: {},
					success: res => {
						uni.hideLoading()
						const {
							data
						} = res
						console.log(data)
						if (data.code == 200) {
							this.detail = data.data
						} else if (data.code == 500) {
							uni.showToast({
								icon: 'none',
								title: data.message,
							});
						}
					},
					fail: (err) => {
						console.error(err)
					},
					complete: () => {
					}
				});
			}
		},
		data() {
			return {
				shenpi:{
					status: '',
					reason: '',
				},
				shenpiing: false,
				assigning: false,
				maintainers:[
					
				],
				mt: '',
				types,
				statuses,
				users, 
				sources,
				detail: {
					id: 0, // 工单id
					no: "", // 工单编号
					address: "", // 工单地址
					type: 0, // 工单类型 1-开通2-报修3-报停4-恢复 5-机房巡检 6 更换滤芯
					source: 0, // 来源 1-是民小程序2-管理员创建
					status: 0, // 1-待派单 2- 待接单 3-已接单 4-待评价/待审核 5 已评价 6 通过  7 拒绝
					serviceTime: "",	// 上门时间
					allocateTime: "", // 派单时间
					acceptTime: "", // 接单时间
					finishTime: "", // 完成时间
					remark: "", 	// 报停原因或以及一些备注
					visitDate: "",							// 上门时间
					visitStartTime:"",					// 上门开始时间
					visitEndTime: "",						// 上门结束时间
					userName: '',
					phone:'',
					workStationOrderDetailVo:{
						name: '',
						chipType: '',
					},
					workUserOrderDetailVo: {
						companyName: "", // 公司名称
						name: "", // 开通人姓名 或公司联系人姓名
						phone: "", // 手机号,
						type: 0, // 开通用户类型 1-个人 2-单位
					},
					"staff": {
						"name": "", // 维保人员名称
						"idCard": "", //维保身份证号
						"phone": "" //维保人员联系方式
					},
				}
			}
		},
		filters: {
			addr(address) {
				const {
					streetAddress
				} = address
				return `${streetAddress.provinceName}${streetAddress.cityName}${streetAddress.regionName}
				${streetAddress.streetName}${address.courtName}${address.buildingNo}栋${address.roomNo}`
			}
		},
		methods: {
			changeMt(evt){
				console.log(evt)
				const {detail} = evt
				const {value} = detail
				this.mt = value
			},
			// 预览图片
			preview(evt, idx, urls) {
				console.log(idx)
				uni.previewImage({
					current: idx,
					urls,
					loop: true,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			},
			// 审批
			startShenpi() {
				this.shenpiing=true
			},
			// 提交审批
			commitShenpi(){
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.adurl + 'workOrder/verify',
					method: 'POST',
					data: {
						verifyId: this.detail.workOrderVerifyDetailVo.verifyId,
						status: this.shenpi.status,
						reason: this.shenpi.reason,						
					},
					success: res => {
						const {data} = res
						if(data.code==200){
							uni.showModal({
								title: '审批',
								content: '审批提交成功！',
								showCancel: false,
								success: res => {
									if(res.confirm){
										uni.navigateBack()
									}
								},
							});
						}else if(data.code==500){
							uni.showToast({
								icon:'none',
								title: data.message,
							});
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			changeShenpi(evt){
				const value = evt.detail.value
				this.shenpi.status=value
			},
			// 显示维保人员
			showMaintainers(reassign=false){
				this.maintainers=[]
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.adurl + 'workOrder/getMaintenanceStaffList',
					method: 'GET',
					data: {
						workId: this.detail.id,
					},
					success: res => {
						const {data} = res
						if(data.code==200){
							console.log(data)
							const d = data.data
							this.maintainers=d
							if(!reassign){
								this.assigning=true
							}else if(reassign && this.maintainers.length>1){
								this.assigning=true
							}else{
								uni.showToast({
									title: '该水站只有一个维保人员'
								});
							}
						}else if(data.code==500){
							uni.showToast({
								icon: 'none',
								title: data.message,
							});
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {uni.hideLoading()}
				});
			},
			// 将工单分派给维保人员
			assign(mt) {
				uni.showLoading({
					title:'派单中...',
					mask:true,
				})
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.adurl + (this.detail.status==statuses.待接单?'workOrder/reAllocate':'workOrder/allocate'),
					method: 'POST',
					data: {
						workId: this.detail.id,
						repairStaffId: this.mt,
					},
					success: res => {
						const {data} = res
						console.log(data)
						uni.hideLoading()
						if(data.code==200){
							const d = data.data
							uni.showModal({
								title: '派单',
								content: '派单成功，已通知维保人员！',
								showCancel: false,
								success: res => {
									if(res.confirm){
										uni.navigateBack()
									}
								},
							});
						}else if(data.code==500){
							uni.showToast({
								icon: 'none',
								title: data.message,
							});
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			// 改派
			reassign() {
				uni.showModal({
					title: '确定重新派单？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '../maintainers/maintainers',
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	radio-group{
		max-height: 14em;
		overflow: scroll;
	}
	
	label{
		background-color: var(--color-page);
		display: block;
		line-height: 3em;
		margin: 0.5em 0;
		padding: 0 1em;
	}
	
	textarea {
		margin: 0 20rpx;
		background-color: white;
		border-radius: 15rpx;
		width: 700rpx;
		min-height: 200rpx;
		padding: 10rpx;
	}

	.gallery {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.gallery>image {
		width: 200rpx;
		height: 200rpx;
		flex-grow: 0;
		flex-shrink: 0;
		margin: 10rpx;
	}
</style>
